<template>
	<view>
		<view class="detail_container">
			
		<!-- F1民宿详情图片 与返回按钮 -->
			<image src="../../../static/image/hotel_detail_img.png" mode=""></image>
			<image @click="_back" class="back-btn" src="../../../static/image/detail_back.png"></image>
		<!-- F1详情图片结束 -->
			
		<!-- F2详情区域开始 -->
		<view class="text_container">
			<!-- F2-1 标题与地址 -->
			<view>
				<text class="hotel_title">{{data.title}}</text>
				<view class="location">
					<text>{{data.location}}</text>
						
				</view>
			</view>
			<!-- F2-1 标题与地址结束 -->
			
			<!-- F2-2联系方式与营业时间 -->
			<view class="contact_way">
				
				<view class="icon_fixd">
					<uni-icons type="phone" size="20"></uni-icons>
					<text >联系电话：{{data.phone}}</text>
				</view>
				
				<view class="icon_fixd">
					<image class="clock"  src="../../../static/image/clock.png" mode=""></image>
					<text style="padding-left: 30px;">营业时间：{{data.time}}</text>
				</view>
			</view>
			<!-- F2-2联系方式与营业时间结束 -->
			
			<!-- F2-3 特色 -->
			<view>
				<text class="special">特色亮点</text>
				
			</view>
			<view class="special_bage_area" >
				<text v-for="(item,index) in data.special" :key='index'>{{item}}</text>
			</view>
			<!-- F2-3 特色结束 -->
			
			<!-- F2-4 相关介绍 -->
			<view class="about">
				<view class="introduce">
					<text>相关介绍</text>
				</view>
				<text class="introduce_detail">
					{{data.detail}}
				</text>
			</view>
			<!-- F2-4 相关介绍结束 -->
		</view>
		<!-- F2详情区域结束 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:{
					title:'特色民宿-青川县xxxx民宿',
					location:'四川广元xxx村',
					phone:'189161581',
					time:'08:00-23:00',
					special:['麻将房','空调','免费停车场','无限WIFI','免费停车场'],
					detail:'“悠然居"民宿位于栾川县冷水镇西增河，距县城约30公里，镶嵌在伏牛山脉的一道沟里。这里山青水秀，平均海拔1400多米，是河南省海拔最高的乡村之一，年日照时数1800小时左右，森林覆盖率达到90%以上，形成了一个天然氧吧，最高温度不超过21摄氏度，被誉为"自然大空调"，三伏天如初春仲秋，是度假避暑，寻觅山林野趣，回归大自然的最理想去处。'
				}
			};
		},
		onLoad() {
			// 请求数据
		},
		methods:{
			_back(){
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	
	page{
		background-color:rgb(248,248,248);
	}
	.detail_container{
		
	// F1 IMAGE
		image{
			position: relative;
			 top:0;
			display: block;
			width: 100%;
		}
		// F1返回按钮
		.back-btn{
			position: absolute;
			width: 48rpx;
			height: 48rpx;
			top:132rpx;
			left: 20rpx;
		}
		// F2文本区域样式
	.text_container{
		width: 100%;
		position: absolute;
		top:200px;
		background-color:rgb(248,248,248);
		 border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		// margin-top: 230px;
		padding: 20rpx;
		overflow: hidden;
		.location{
			padding: 10rpx 0;
		}
		.contact_way{
			padding: 5rpx;
			.clock{
				width: 20px;
				height: 20px;
				position: absolute;
				top:5px;
				left: 5px;
				z-index:1;
			}
			.icon_fixd{
				position: relative;
				display: flex;
				align-items: center;
				text{
					padding-left: 10rpx;
				}
			}
			
			view{
				padding: 10rpx 0;
			}
		}
		
	}
	// F2-1&2 详情民宿title
	.hotel_title{
		font-weight: bold;
		font-size: 42rpx;
	}
	// F2-3 特色特点
	.special{
		font-size: 32rpx;
		font-weight: bold;
		display: block;
		padding: 8px 0px;
	}
	// F2-3特色特点bage
		.special_bage_area{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			text{
				color:rgb(30,212,125) ;
				display: block;
				padding: 3rpx;
				margin: 0rpx 15rpx 16rpx 0rpx;
				border-radius: 4px;
				border: 1px solid rgb(30,212,125);
			}
		}
		.about{
			
			.introduce{
				font-size: 32rpx;
				font-weight: bold;
				padding: 10rpx 0;
			}
			.introduce_detail{
				display: block;
				padding: 20rpx;
				height: 100%;
				font-size: 32rpx;
			}
		}
	}
</style>
